<script setup lang="ts">
import { ref, onMounted,toRefs } from 'vue'
import { CANVAS_ELE_TYPE, CommonWidth } from '@/utils/constants'
import { PaintBoard } from '@/utils/paintBoard'
import { FreeDrawStyle } from '@/utils/element/freeDraw'
import Layer from '../layer/index.vue'
import { CHANGE_COLOR_TYPE, styleSwitch, typeSwitch } from './constant'
import UndoIcon from '@/components/icons/undoC.vue'
import RedoIcon from '@/components/icons/redoC.vue'
import SaveIcon from '@/components/icons/saveC.vue'
import CleanIcon from '@/components/icons/cleanC.vue'
import CloseIcon from '../icons/closeC.vue'
import MenuIcon from '../icons/menuC.vue'

interface IProps {
  board: PaintBoard | undefined // 画板
  toolType: string // 操作类型
  setToolType: (type: string) => void // 修改操作类型
}
const props = defineProps<IProps>()

const {board, toolType, setToolType} = toRefs(props)

let toastTimeout: number | null = null
const colorInput = ref('')
onMounted(() => {
	setColorInput()
})

const setColorInput = function(){
	if (board.value?.currentLineColor) {
		// colorInput.value =  board.currentLineColor[0].split('#')[1] || ''
		colorInput.value =  board.value.currentLineColor[0] || ''
	}else{
		colorInput.value = ''
	}
}

const toastState = ref(false)
const showPanel = ref(true)
const refresh = ref(0)
const setRefresh = function(){
	refresh.value+1
}
const  setToastState = function(value:boolean) {
	toastState.value = value
}
const  setShowPanel = function() {
	showPanel.value = !showPanel.value
}


// 改变画笔颜色
const changeLineColor = (color: string, index: number, type: string) => {
  if (board.value) {
    const colors = [...board.value.currentLineColor]
    colors[index] = color
    const newColor = type === CHANGE_COLOR_TYPE.UNI ? [color] : colors
    board.value.setFreeDrawColor(newColor)
    setRefresh()
  }
}

// 删除画笔颜色
const deleteLineColor = (index: number) => {
  if (board.value) {
    const colors = [...board.value.currentLineColor]
    colors.splice(index, 1)
    board.value.setFreeDrawColor(colors)
    setRefresh()
  }
}

// 复制颜色
const copyColor = () => {
  const inputElement = document.querySelector('#colorInput') as HTMLInputElement
  inputElement.select()
  document.execCommand('copy')
  setToastState(true)
  if (toastTimeout) {
    clearTimeout(toastTimeout)
  }
  toastTimeout = setTimeout(() => {
    setToastState(false)
  }, 2000)
}

// 点击后退
const undo = () => {
  if (board.value) {
    board.value.undo()
  }
}

// 点击前进
const redo = () => {
  if (board.value) {
    board.value.redo()
  }
}

// 清除画布
const clean = () => {
  if (board.value) {
    board.value.clean()
  }
}

// 保存图片
const saveImage = () => {
  if (board.value) {
    board.value.saveImage()
  }
}

// 改变宽度
const setWidth = (w: number) => {
	console.log(toolType,);
  if (board.value) {
    switch (toolType.value) {
      case CANVAS_ELE_TYPE.FREE_DRAW:
        board.value.setFreeDrawWidth(w)
        break
      case CANVAS_ELE_TYPE.ERASER:
        board.value.setCleanWidth(w)
        break
      default:
        break
    }
    setRefresh()
  }
}

// 改变画笔样式
const setFreeDrawStyle = (mode: FreeDrawStyle) => {
  if (board.value) {
    board.value.setFreeDrawStyle(mode)
    setRefresh()
  }
}
</script>

<template>
  <div  style="background-Color:#EEF1FF" :class="showPanel ? 'p-5' : ''" class = "fixed top-5 left-5 flex flex-col card shadow-xl overflow-visible">
		<!-- /* 控制面板显示 */ -->
		<label class="btn btn-circle swap swap-rotate absolute -top-4 -left-4 h-8 w-8 min-h-0">
			<input type="checkbox" @change="setShowPanel" />
			<CloseIcon class="swap-on fill-current" />
			<MenuIcon class="swap-off fill-current" />
		</label>
		<template v-if="showPanel">
				<!-- /* 类型切换 */ -->
				<div class="btn-group flex">
					<button
						v-for="({type}) in typeSwitch"
						:key=type
						class="btn btn-sm flex-grow"
						:class="toolType === type ? 'btn-active' : ''"
						@click="() => setToolType(type)"
					>
						{{type}}
					</button>
				</div>
				<!-- 宽度设置 -->
				<div class="mt-3" v-if="toolType === CANVAS_ELE_TYPE.FREE_DRAW ||
									toolType === CANVAS_ELE_TYPE.ERASER">
					<div class="font-bold">Width</div>
					<div class="btn-group flex mt-1">
						<button
							v-for="( w ) in Object.values(CommonWidth)"
							:key="w"
							:class="{
								btn: true,
								'btn-sm': true,
								'flex-grow': true,
								'btn-active':
									toolType === CANVAS_ELE_TYPE.FREE_DRAW
										? board?.currentLineWidth === w
										: board?.cleanWidth === w
							}"
							@click="setWidth(w)"
						>
							<div
								class="rounded-2xl bg-black"
								:style="{height: `${w / 2}px`,
									width: '30px'}"
								:key="w"
							></div>
						</button>
					</div>
				</div>

				<!-- 颜色设置 -->
				<div class="form-control mt-3" v-if="toolType === CANVAS_ELE_TYPE.FREE_DRAW">
					<div class="font-bold">Color</div>
					<div class="mt-1 flex items-center w-full" >
						<template v-if="board?.currentFreeDrawStyle === FreeDrawStyle.MultiColor">
							<div  class="w-8 h-8 mr-2 indicator" 
								v-for="(_color,i) in board?board.currentLineColor:[]"
								:key="i">
								<input
									class="lineColor"
									type="color"
									:value="`#${colorInput}`"
									@change="(e) => {
										changeLineColor((e.target as any).value, i, 'double')
									}"
								/>
								<span
										v-show="board&&board.currentLineColor.length > 1"
										@click="() => deleteLineColor(i)"
										class="indicator-item badge badge-secondary w-3 h-3 p-0 text-sm bg-black text-white border-black cursor-pointer block text-center"
										:style="{lineHeight: '0.5rem'}"
									>
										x
									</span>
							</div>
							<div
								v-show="board.currentLineColor.length < 6"
								className="w-8 h-8 rounded-sm border-dashed border-2 border-black text-center leading-6 text-2xl box-border cursor-pointer"
								@click="changeLineColor(
										'#000000',
										board.currentLineColor.length,
										CHANGE_COLOR_TYPE.MULTI
									)"
							>
								+
							</div>
						</template>
						<!-- 单色配置 -->
						<template v-else >
							<div class="w-8 h-8 mr-2 1111">
								<input
									class="lineColor"
									type="color"
									v-model="colorInput"
									@change="(e) => {
										changeLineColor((e.target as any).value, 1, CHANGE_COLOR_TYPE.UNI)
									}"
								/>
							</div>
							<label class="input-group">
								<span class="font-bold bg-primary">#</span>
								<input
									@click="copyColor"
									:value="colorInput.split('#')[1]"
									id="colorInput"
									class="input input-bordered input-sm w-32 focus:outline-none cursor-pointer"
									readOnly
								/>
							</label>
						</template>
						
					</div>
				</div>

				<!-- 样式配置 -->
				<div class="mt-3" v-show="toolType === CANVAS_ELE_TYPE.FREE_DRAW">
					<div class="font-bold">Style</div>
					<div class="btn-group flex">
						<button
							:key="type"
							v-for="({type, name }) in styleSwitch.line_1"
							class="btn btn-sm flex-grow"
							:class="board?.currentFreeDrawStyle === type ? 'btn-active' : ''"
							@click="setFreeDrawStyle(type)"
							>
							{{ name }}
						</button>
					</div>
					<div class="btn-group mt-1 flex">
						<button
							:key="type"
							v-for="({type, name }) in styleSwitch.line_2"
							class="btn btn-sm flex-grow"
							:class="board?.currentFreeDrawStyle === type ? 'btn-active' : ''"
							@click="setFreeDrawStyle(type)"
							>
							{{ name }}
						</button>
						
					</div>
				</div>

				<!-- 操作画板 -->
				<div class="mt-3">
					<div class="font-bold">Tool</div>
					<ul class="menu menu-horizontal bg-base-100 rounded-box justify-between mt-1">
						<li>
							<a @click="undo">
								<div class="tooltip" data-tip='operate.undo'>
									<UndoIcon />
								</div>
							</a>
						</li>
						<li>
							<a @click="redo">
								<div class="tooltip" data-tip='operate.redo'>
									<RedoIcon />
								</div>
							</a>
						</li>
						<li>
							<a @click="clean">
								<div class="tooltip" data-tip='operate.clean'>
									<CleanIcon />
								</div>
							</a>
						</li>
						<li>
							<a @click="saveImage">
								<div class="tooltip" data-tip='operate.save'>
									<SaveIcon />
								</div>
							</a>
						</li>
					</ul>
				</div>

				<Layer :board='board' :refresh="() => setRefresh()" />

		</template>
	</div>
</template>

<style scoped>
.lineColor {
  width: 2rem;
  height: 2rem;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.lineColor::-webkit-color-swatch-wrapper {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 4px;
}

.lineColor::-webkit-color-swatch {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 4px;
}
</style>
